<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="keywords" content="土购网,电商,农产品">
  <meta name="description" content="这是一个关于农产品的电商网站。">
  <title>土购网</title>
  <link rel="stylesheet" href="../node_modules/swiper/swiper-bundle.css">
  <link rel="shortcut icon" href="../res/images/logo.png" type="image/png">
  <!-- 引入样式文件 -->
  <!-- <link rel="stylesheet" href="./dist/css/app.css"> -->
  <link rel="stylesheet/less" href="../style/app.less">
  <link rel="stylesheet/less" href="../style/reset.less">
  <link rel="stylesheet/less" href="../style/login.less">
  <link rel="stylesheet/less" href="../style/nav.less">
  <link rel="stylesheet/less" href="../style/category.less">
  <link rel="stylesheet/less" href="../style/goods_details.less">
  <link rel="stylesheet/less" href="../style/bar.less">
  <!-- <link rel="stylesheet/less" href="style/goods.less"> -->
  <!-- 引入编译less的文件 -->
  <script src="../node_modules/less/dist/less.js"></script>
</head>

<body>
  <!-- 头部 -->
  <header>
    <!-- 顶部信息 -->
    <div class="top-nav">
      <div class="container clearfix">
        <ul class="left-nav left">
          <li><a href="../index.html">您好！欢迎来到土购网菜市场！</a></li>
          <li class="login" data-type="login"><a href="" data-type="login">请登录</a></li>
          <li class="register" data-type="register"><a href="" data-type="register">免费注册</a></li>
        </ul>
        <ul class="right-nav right">
          <li><a href="">购物车</a></li>
          <li><a href="">服务热线：<span>8004001234</span></a></li>
        </ul>
      </div>
    </div>
    <!-- 搜索 -->
      <div class="top-search-container">
      <div class="container clearfix">
        <!-- logo -->
        <a href="index.html" class="left-icon left">
          <img src="../res/images/logo.png" alt="logo" />
        </a>
        <!-- 搜索 -->
        <div class="search left">
          <input type="search">
          <button class="btnsearch">搜索</button>
        </div>
      </div>
    </div>
    <!-- 导航 -->
      <nav class="top_sub_nav_container">
      <div class="nav_container"></div>
    </nav>
    <!-- 轮播图 -->
      <nav class="top_banner_container" style="margin-top: -48px;">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="https://photo.16pic.com/00/87/88/16pic_8788381_b.jpg" alt="图一" width="100%" height="400px">
          </div>
          <div class="swiper-slide">
            <img src="https://img2.baidu.com/it/u=962017654,4005562751&fm=253&fmt=auto&app=138&f=JPEG?w=985&h=413"
              alt="图二" width="100%" height="400px">
          </div>
          <div class="swiper-slide">
            <img src="https://5b0988e595225.cdn.sohucs.com/images/20171208/3e9a96b1380c46aaa08216a94620c9fe.jpeg"
              alt="图三" width="100%" height="400px">
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <!-- 分类导航 -->
        <div class="category-nav"></div>
      </div>
    </nav>
  </header>
  <!-- 主体部分 -->
  <main>
    <div class="goods-details clearfix">
      <div class="goods-img left"></div>
      <div class="goods-info left">
        <h2 class="title"></h2>
        <p>零售价:￥ <span class="price"></span></p>
        <button class="btnPay">立即购买</button>
      </div>
    </div>
  </main>
  <!-- 尾部 -->
  <footer>
    <div class="security">
      <ul class="wrap">
        <li><i class="i1"></i>土的自然 购得放心</li>
        <li><i class="i2"></i>买卖特产 全程服务</li>
        <li><i class="i3"></i>正品保障 精致生活</li>
        <li><i class="i4"></i>天天特价 特惠体验</li>
      </ul>
    </div>
    <div class="foot clearfix">
      <em class="left">
        <a href="http://www.agrisearch.cn/home.htm;jsessionid=1C554F2AB8FFEECDEE24CAE6F4D02089">
          <img src="https://img0.baidu.com/it/u=546943967,3365537319&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=502"
            alt="中国农业网站共建联盟" style="width: 144px;height: 81px;">
        </a>
        <a href="https://www.farmer.com.cn/">
          <img src="https://img2.baidu.com/it/u=3845297183,3690224274&fm=253&fmt=auto&app=138&f=PNG?w=479&h=319"
            alt="中国农事网" style="width: 144px;height: 61px;">
        </a>
        <a href="http://www.hao123.com/">
          <img src="http://www.hao123.com/static/images/public/logo.jpg" alt="hao123">
        </a>
      </em>
      <p>
        <a href="#">关于我们</a>
        <a href="#">联系我们</a>
        <a href="#">隐私声明</a>
        <a href="#">服务条款</a>
        <a href="#">招贤纳士</a>
        <a href="#">商家入驻</a>
      </p>
      <p>
        增值电信业务经营许可证粤B2-2012052 粤ICP备12003095-2号 Copyright&copy;2013-2022 版权所有 http://www.lovehou.com
      </p>
      <div style="width:300px;margin:0 auto; padding:20px 0;">
        <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=36070202000100"
          style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img
            src="https://www.beian.gov.cn/img/new/garment.png"
            style="float:left;width: 50px;height: 50px; margin-top: -15px;">
          <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">粤公网安备
            36070202000100号</p>
        </a>
      </div>
    </div>
  </footer>
</body>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/swiper/swiper-bundle.js"></script>
<script src="../js/tools.js"></script>
<script src="../js/app.js"></script>

</html>